<template>
  <div v-if="list[$route.params.id]" class="list">
    <template v-if="list[$route.params.id].length > 0">
      <div v-for="item in list[$route.params.id]" :key="item.id" class="card">
        <router-link :to="`/article/${item.id}`">
          <Card :body-style="cardStyle">
            <div class="title">{{ item.title }}</div>
            <div class="date">{{ item.date }}</div>
            <div class="auth">{{ item.authName }}</div>
          </Card>
        </router-link>
      </div>
    </template>
    <NoData v-else />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { Card } from "element-ui";
import NoData from "../components/NoData";
export default {
  data() {
    return {
      cardStyle: {
        height: "100px",
        width: "200px"
      }
    };
  },
  methods: {
    ...mapActions(["getLists"])
  },
  computed: {
    ...mapGetters(["list"])
  },
  components: {
    Card,
    NoData
  },
  created() {
    this.getLists(this.$route.params.id);
  },
  beforeRouteUpdate(to, from, next) {
    this.getLists(to.params.id);
    next();
  }
};
</script>

<style scoped>
.list {
  display: flex;
  flex-wrap: wrap;
}
.card {
  margin: 20px;
}
a {
  text-decoration: none;
}
</style>
